<script setup lang="ts">
import { onMounted, reactive } from 'vue';
const props: any = defineProps<{
    ujt: any;
}>();

const { $global, $fn } = props.ujt;
const kudududata: any = reactive({
    hash: 'robot/indexslam',
});

onMounted(() => {
    // 搜索功能
    document.getElementById('kdd-searchInput').addEventListener('keypress', (e) => {
        if (e.key === 'Enter') {
            const keyword = e.target.value.trim();
            if (keyword) {
                alert(`执行搜索：${keyword}`);
                // 实际搜索逻辑
            }
        }
    });

    // 筛选功能
    document.querySelectorAll('.filter-btn').forEach(btn => {
        btn.addEventListener('click', function () {
            document.querySelector('.filter-btn.active').classList.remove('active');
            this.classList.add('active');
            // 此处可添加实际筛选逻辑
        });
    });

    // 分页交互
    document.querySelectorAll('.page-btn').forEach(btn => {
        btn.addEventListener('click', function () {
            document.querySelector('.page-btn.active').classList.remove('active');
            this.classList.add('active');
            // 此处可添加分页加载逻辑
        });
    });

    // 文章点击交互
    document.querySelectorAll('.article-item').forEach(item => {
        item.addEventListener('click', function (e) {
            if (!e.target.closest('a')) {
                window.location.href = 'article-detail.html';
            }
        });
    });

})
</script>

<template>
    <div class="list-container">
        <div class="kdd-search-box">
            <input type="text" id="kdd-searchInput" placeholder="搜索行业资讯...">
        </div>

        <div class="filter-bar">
            <button class="filter-btn active">全部</button>
            <button class="filter-btn">技术前沿</button>
            <button class="filter-btn">行业政策</button>
            <button class="filter-btn">市场动态</button>
            <button class="filter-btn">展会信息</button>
        </div>

        <div class="article-list">
            <!-- 文章条目 示例1 -->
            <article class="article-item">
                <div class="article-thumb"></div>
                <div class="article-content">
                    <div>
                        <h3>2024全球机器人产业峰会即将开幕</h3>
                        <p class="article-meta">
                            <span>📅 2024-03-15</span>
                            <span class="article-tag">展会信息</span>
                            <span>👁️ 1520浏览</span>
                        </p>
                        <p>本次峰会将汇聚全球顶尖机器人企业，展示最新人形机器人、工业自动化解决方案和AI核心技术...</p>
                    </div>
                    <a href="#" style="color: var(--primary); align-self: flex-start;">阅读全文 →</a>
                </div>
            </article>

            <!-- 文章条目 示例2 -->
            <article class="article-item">
                <div class="article-thumb"></div>
                <div class="article-content">
                    <div>
                        <h3>新型柔性机械臂突破传统工业限制</h3>
                        <p class="article-meta">
                            <span>📅 2024-03-14</span>
                            <span class="article-tag">技术前沿</span>
                            <span>👁️ 2345浏览</span>
                        </p>
                        <p>MIT研发团队最新发布的柔性机械臂采用仿生结构设计，可实现毫米级精准操作，已通过工业4.0标准测试...</p>
                    </div>
                    <a href="#" style="color: var(--primary); align-self: flex-start;">阅读全文 →</a>
                </div>
            </article>

            <!-- 更多文章条目... -->
        </div>

        <div class="kdd-li-page">
            <button class="page-btn active">1</button>
            <button class="page-btn">2</button>
            <button class="page-btn">3</button>
            <button class="page-btn">4</button>
            <button class="page-btn">下一页</button>
        </div>
    </div>
</template>

<style scoped lang="scss">
/* 新增列表页专属样式 */
.list-container {
    max-width: 1200px;
    margin: 100px auto 2rem;
    padding: 0 1rem;
    
    min-height: calc(100vh - var(--nav-height));
    // padding: var(--nav-height) 20px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: radial-gradient(circle at center,
            rgba(0, 247, 255, 0.1) 0%,
            rgba(10, 10, 46, 1) 70%);
}


/* 搜索框 */
.kdd-search-box {
    width: min(90%, 700px);
    position: relative;
    margin: 2rem 0;
}

#kdd-searchInput {
    width: 100%;
    padding: 1.2rem 2rem;
    border: 2px solid var(--primary);
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    font-size: clamp(1rem, 2.5vw, 1.2rem);
    backdrop-filter: blur(5px);
    transition: 0.3s;
}

#kdd-searchInput:focus {
    outline: none;
    box-shadow: 0 0 30px var(--primary);
}

.filter-bar {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}

.filter-btn {
    padding: 0.8rem 1.5rem;
    border: 1px solid var(--primary);
    border-radius: 20px;
    background: transparent;
    color: white;
    cursor: pointer;
    transition: 0.3s;
}

.filter-btn.active {
    background: var(--bg-gradient);
    border-color: transparent;
}

.article-list {
    display: grid;
    gap: 1.5rem;
}

.article-item {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    padding: 1.5rem;
    border: 1px solid rgba(0, 247, 255, 0.2);
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 1.5rem;
    transition: 0.3s;
}

.article-thumb {
    height: 150px;
    background: var(--bg-gradient);
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}

.article-thumb::after {
    content: "ROBOT NEWS";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 0.5rem;
    font-size: 0.9em;
    text-align: center;
}

.article-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.article-meta {
    display: flex;
    gap: 1rem;
    color: var(--primary);
    font-size: 0.9em;
}

.article-tag {
    background: rgba(0, 247, 255, 0.2);
    padding: 0.3rem 0.8rem;
    border-radius: 15px;
}

.kdd-li-page {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 3rem;
}

.page-btn {
    padding: 0.8rem 1.2rem;
    border: none;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    cursor: pointer;
    transition: 0.3s;
}

.page-btn.active {
    background: var(--bg-gradient);
    box-shadow: 0 0 10px var(--primary);
}

/* 悬停动画 */
.article-item:hover {
    transform: translateX(10px);
    box-shadow: 5px 5px 15px rgba(0, 247, 255, 0.2);
}

@media (max-width: 768px) {
    .article-item {
        grid-template-columns: 1fr;
    }

    .article-thumb {
        height: 200px;
    }
}
</style>
